<div id="network-supply-custom-bar3" style="height: 100%">

</div>

<script type="text/javascript">
    $(function () {
        loadbar3();
        $("select#prjId").change(function(){
            loadbar3();
        });
    });
    function loadbar3() {
        var center = $("#prjId").val();
        $.ajax({
            url: "#springUrl('/network/supply/custom/bar3')",
            data: {"center": center},
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    var myChart = echarts.init(document.getElementById('network-supply-custom-bar3'), 'macarons');
                    option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
                        },
                        color:['#0fa99d','#d9d9d9','#787473','#c9eee7','#e7a14c',
                            '#4472c4','#40C2F0','#9EC678','#BDD7EE','#A5A5A5',
                            '#8497B0','#BDC3E2','#EBEBEB','#015E7F','#415168'],
                        series: [
                            {
                                name: '订单类型',
                                type: 'pie',
                                selectedMode: 'single',
                                radius: [0, '30%'],

                                label: {
                                    normal: {
                                        position: 'outside'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: true,
                                        length:60
                                    }
                                },
                                data: d.data.data1
                            },
                            {
                                name: '订单类型下的售达方',
                                type: 'pie',
                                radius: ['40%', '55%'],
                                label: {
                                    normal: {
                                        show: false,
                                        backgroundColor: '#eee',
                                        borderColor: '#aaa',
                                        borderWidth: 1,
                                        borderRadius: 4,
                                        // shadowBlur:3,
                                        // shadowOffsetX: 2,
                                        // shadowOffsetY: 2,
                                        // shadowColor: '#999',
                                        // padding: [0, 7],
                                        rich: {
                                            a: {
                                                color: '#999',
                                                lineHeight: 22,
                                                align: 'center'
                                            },
                                            // abg: {
                                            //     backgroundColor: '#333',
                                            //     width: '100%',
                                            //     align: 'right',
                                            //     height: 22,
                                            //     borderRadius: [4, 4, 0, 0]
                                            // },
                                            hr: {
                                                borderColor: '#aaa',
                                                width: '100%',
                                                borderWidth: 0.5,
                                                height: 0
                                            },
                                            b: {
                                                fontSize: 16,
                                                lineHeight: 33
                                            },
                                            per: {
                                                color: '#eee',
                                                backgroundColor: '#334455',
                                                padding: [2, 4],
                                                borderRadius: 2
                                            }
                                        }
                                    }
                                },
                                data:d.data.data2
                            }
                        ]
                    };
                    myChart.setOption(option);
                }else{
                    document.getElementById("loading").style.display="none";
                    var div1="<div type='text' style='padding-top:15%' class=' text-center '>"+d.message+"</div>";
                    $("#network-supply-custom-bar3").empty();
                    $("#network-supply-custom-bar3").prepend(div1);
                }
            }
        })
    }



</script>